<template>
  <div class="view-switch">
    <router-link
      v-for="item in viewsList"
      :to="`/monitor/${item.idx}`"
      :class="[
        $route.params.id === item.idx ? 'active' : '',
        'view-switch-item',
      ]"
      :key="item.key"
    >
      {{ item.label }}
    </router-link>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('monitor')
import { APIGetMonitoringSolutionsForMaster } from '@/api/monitor.js'
export default {
  name: 'ViewSwitch',
  data() {
    return {
      viewsList: [],
    }
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations(['handleViewMap', 'handleSolutionName']),
  },
  created() {
    APIGetMonitoringSolutionsForMaster().then((res) => {
      console.log('APIGetMonitoringSolutionsForMaster', res)
      if (res.code == 0) {
        const solution = res.data.find(f => f.solutionState == 1);
        // 生成viewMap
        const map = {};
        this.viewsList = solution?.viewInfoList?.map((m, index) => {
          map[index + 1] = m.viewId
          return {
            idx: `${index + 1}`,
            label: m.viewName,
            key: m.viewId,
          }
        })
        this.handleViewMap(map)
        // 生成solutionName
        this.handleSolutionName(solution.solutionName)
      }
    })
    // setTimeout(() => {
    //   const map = {}
    //   this.viewsList = [
    //     {
    //       viewId: 255319,
    //       viewName: '服务跟踪',
    //       ifCustomised: '-1',
    //     },
    //     {
    //       viewId: 281868,
    //       viewName: '质量监控',
    //       ifCustomised: '-1',
    //     },
    //     {
    //       viewId: 493300,
    //       viewName: 'lihq',
    //       ifCustomised: '-1',
    //     },
    //     {
    //       viewId: 778690,
    //       viewName: 'wumoba',
    //       ifCustomised: '-1',
    //     },
    //   ].map((m, index) => {
    //     map[index + 1] = m.viewId
    //     return {
    //       idx: `${index + 1}`,
    //       label: m.viewName,
    //       key: m.viewId,
    //     }
    //   })
    //   this.handleViewMap(map)
    // })
  },
}
</script>

<style scoped lang="less">
.view-switch {
  position: fixed;
  z-index: 5;
  bottom: 50px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
  .view-switch-item {
    width: 120px;
    height: 42px;
    background: url('/tgcos/vue-lcd-engine/lcd-icon-monitor-switch_normal.png')
      no-repeat center;
    background-size: cover;
    color: #b4cbf2;
    font-size: 16px;
    font-weight: 500;
    line-height: 38px;
    text-align: center;
    margin: 0 10px;
    position: relative;
    cursor: pointer;
    &.active {
      background: url('/tgcos/vue-lcd-engine/lcd-icon-monitor-switch_selected.png')
        no-repeat center;
      background-size: cover;
      color: #fff;
    }
  }
}
</style>
